<template>
  <div class="home">
    <transition name="van-slide-right">
      <router-view></router-view>
    </transition>
    <!-- 首页搜索框 -->
    <div
      ref="fixedBar"
      :class="searchBarFixed == true ? 'isFixed' : 'indexSearch'"
    >
      <div>
        <van-icon class="scan" name="scan" size="1.5rem" />
      </div>
      <input
        v-model="SearchVal"
        placeholder="请输入搜索关键词"
        @click="$router.push('/home/searchPopup')"
      />
      <van-icon
        class="cart"
        @click="goOrder"
        name="shopping-cart-o"
        size="1.5rem"
      />
    </div>

    <!-- 轮播图 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="item in banner" :key="item.cid">
        <img
          :src="`/${item.img}`"
          width="100%"
          height="210px"
          :style="{ display: 'block' }"
          alt=""
        />
      </van-swipe-item>
    </van-swipe>

    <!-- 列表 -->
    <div
      class="scenicList"
      v-for="item in list"
      :key="item.sid"
      @click="toSciencesDetail(item.sid)"
    >
      <div class="ListImg">
        <img :src="`/img/scenic/${item.img}`" alt="" />
      </div>
      <div class="ListText">
        <div>
          <h4>{{ item.title }}</h4>
          <p>{{ item.xsite }}</p>
        </div>
        <div class="ListTextBottom">
          <div>
            <span>{{ item.p_count }}</span>
          </div>
          <div>
            <span>¥</span>
            <span>{{ item.p_price }}</span>
            <span>.00</span>
            <span>起</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
// import axios from "axios";
// import request from "@/request/reques";
import { GetHomeList } from "@/request/api";
export default {
  data() {
    return {
      SearchVal: "", //搜索框的v-model值
      banner: [],
      scenics: [],
      list: "",
      searchBarFixed: false,
      offsetTop: 0,
      loading: false,
      finished: false,
      refreshing: false,
    };
  },
  mounted() {
    // 创建页面滚动监听
    window.addEventListener("scroll", this.handleScroll);
    // 获取需要固定元素，与顶部的偏移量
    this.offsetTop = this.$refs.fixedBar.offsetTop;
  },
  destroyed() {
    // 销毁创建的页面 滚动监听
    window.removeEventListener("scroll", this.handleScroll);
  },
  methods: {
    // 滚动事件
    handleScroll() {
      // 滚动量
      const scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      //如果滚动大于固定元素的偏移量,则固定,小于 则不固定
      scrollTop > this.offsetTop
        ? (this.searchBarFixed = true)
        : (this.searchBarFixed = false);
    },
    toSciencesDetail(id) {
      this.$router.push("/sciencesDetail?sid=" + id);
    },
    goOrder() {
      this.$router.push("/sciencesDetail/order");
    },
  },
  created() {
    GetHomeList()
      .then((res) => {
        // console.log("success=======", res);
        this.banner = res.carouselItem;
        this.list = res.scenicIndex;
      })
      .catch((err) => {
        // console.log("errer", err);
      });
  },
};
</script>
<style lang="scss" scoped>
.home{
  background-image: url("/public/img/user/login-bg.png");
}
.isFixed {
  position: fixed;
  top: 0;
  background: linear-gradient(to right, #a1c4fd 0%, #c2e9fb 100%);
  width: 100%;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 6vw;
  padding-bottom: 2vw;
  .scan,
  .cart {
    margin: 0 6vw;
    font-weight: 600;
    color: #fff;
  }
  input {
    height: 9vw;
    border: none;
    flex-basis: 80vw;
    border-radius: 6vw;
    text-align: center;
    background-color: rgba(255, 248, 248, 0.6);
  }
}
.indexSearch {
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 6vw;
  margin-bottom: 2vw;
  .scan,
  .cart {
    margin: 0 6vw;
    font-weight: 600;
    color: #fff;
  }
  input {
    height: 9vw;
    border: none;
    flex-basis: 80vw;
    border-radius: 6vw;
    text-align: center;
  }
}
.scenicList {
  background-color: #fff;
  border-radius: 6px;
  margin: 0 3px;
  padding: 0 3px;
  margin-top: 3vw;
  display: flex;
  height: 36.5vw;
  .ListImg {
    flex-basis: 36.5vw;
    img {
      border-radius: 10px;
      width: 30vw;
      height: 30vw;
      margin: 3vw;
    }
  }
  .ListText {
    flex-grow: 1;
    padding: 3vw 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    h4 {
      font-size: 18px;
      font-weight: 600;
    }
    p {
      padding-top: 3vw;
      font-size: 12px;
      color: #969799;
    }
    .ListTextBottom {
      display: flex;
      justify-content: space-between;
      align-items: center;
      div:first-child {
        color: #969799;
        font-size: 14px;
      }
      div:last-child {
        span:first-child,
        span:nth-child(3) {
          color: red;
          font-weight: 800;
          font-size: 12px;
        }
        span:nth-child(2) {
          color: red;
          font-weight: 800;
          font-size: 18px;
        }
        span:last-child {
          color: #969799;
          font-size: 12px;
          margin-right: 3vw;
        }
      }
    }
  }
}
.scenicList:last-child {
  margin-bottom: 60px;
}
</style>